<template>
  <div class="w">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right ">
        <!-- <el-breadcrumb-item :to="{ path: '/' }">酒店</el-breadcrumb-item> -->
        <el-breadcrumb-item>酒店</el-breadcrumb-item>
        <el-breadcrumb-item>{{ state2 }}酒店预订</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 城市筛选 -->
    <div class="filter">
      <div class="city">
        <el-row class="demo-autocomplete">
          <el-col>
            <el-autocomplete
              class="inline-input"
              v-model="state"
              :fetch-suggestions="querySearchCity"
              placeholder="切换城市"
              :trigger-on-focus="false"
              @select="handleSelect"
            ></el-autocomplete>
          </el-col>
        </el-row>
      </div>
      <div class="date">
        <date @getAllDate="getAllDate"></date>
      </div>
      <div class="num">
        <num></num>
      </div>
      <div class="price">
        <!--  <el-button
          style="width: 70%"
          type="primary"
          icon="el-icon-search"
          @click="handleSubmit"
        >
          搜索
        </el-button> -->
        <el-button type="primary" @click="handleSubmit">查看价格</el-button>
      </div>
    </div>

    <!-- 区域以及地图 -->
    <div class="box2">
      <myarea :id="id_f" :scenics="scenics_f" :num="num_f"></myarea>
      <div id="container"></div>
    </div>

    <!-- 酒店筛选条件 -->
    <hotelFilter
      @getHotelList="getHotelList"
      @getHotelTotal="getHotelTotal"
    ></hotelFilter>

    <!-- 酒店介绍recommend -->
    <!-- console.log(hotelList_f); -->
    <hotelList :hotelList="hotelList_f"></hotelList>

    <!-- 分页 -->
    <!-- 需要的数据：酒店总数量total    -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
      <!--  :page-sizes="[10, 20, 30, 40]" 
      :page-size="100"
      -->
      <!--       
      total: "", //总条目数
      sizes: "", //每页显示的页码数量
      prev: "",  //上一页
      pager: "", //页码列表
      next: "",  //下一页 -->
    </el-pagination>
  </div>
</template>

<script>
import date from "@/components/hotel/date";
import myarea from "@/components/hotel/area";
import num from "@/components/hotel/num";
import hotelFilter from "@/components/hotel/hotelFilter";
import hotelList from "@/components/hotel/hotelList";
import { login } from "~/components/user/user";
export default {
  data() {
    return {
      hotelList_f: [],
      //区域
      id_f: "",
      scenics_f: "",
      num_f: "",
      // 分页参数

      _limit: 0, //条数
      _start: "", //开始数据（分页）
      // 分页

      total: 30, //总条目数
      sizes: "", //每页显示的页码数量
      prev: "", //上一页
      pager: "", //页码列表
      next: "", //下一页
      jumper: "", //跳页元素
      currentPage4: 1,

      restaurants: [],
      state: "广州市",
      // this.state2=this.state1
      state2: "广州市",
      timeout: null,
      // enterTime=2020-11-26&leftTime=2020-12-17&cityName=上海市
      // hotels?city=197&enterTime=2019-06-12&leftTime=2019-07-15&_limit=1&_start=0
      form: {
        // this.enterTime = data[0];
        enterTime: "",
        //  this.leftTime = data[1];
        leftTime: "",

        cityName: "广州市",
        city: "",
        _limit: "",
        _start: "",
      },
    };
  },
  methods: {
    getHotelTotal(total) {
      this.total = total;
      console.log(this.total);
      console.log("在我之后执行了什么呀，为什么会改变啊");
    },
    getHotelList(hotelList_filter) {
      this.hotelList_f = hotelList_filter;
      // console.log(this.hotelList_f);
    },
    //分页
    // size-change处理页码大小
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // _limit: "", //条数
      // _start: "", //开始数据（分页）
      this._limit = val;
      console.log(this._limit);

      // 每点击一次每页val条就获取一次数据
      this.$axios({
        method: "get",
        url: "/hotels",
        params: {
          city: this.id_f,
          _limit: this._limit,
        },
      }).then((res) => {
        this.hotelList_f = res.data.data;
        // console.log("我获取数据了");
      });
    },
    // current-change事件处理当前页变动时候触发的事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this._start = this._limit * val;

      this.$axios({
        method: "get",
        url: "/hotels",
        params: {
          city: this.id_f,
          _limit: this._limit,
          _start: val,
        },
      }).then((res) => {
        this.hotelList_f = res.data.data;
        console.log(res.data.nextStart);
        console.log(res.data);
      });
    },

    // 初步筛选，将城市名称、出发日期和到达日期发到url上
    // /hotel?enterTime=2020-11-26&leftTime=2020-12-17&cityName=上海市
    handleSubmit() {
      // 将城市名字和城市日期添加到url上
      this.$axios({
        method: "get",
        url: "/cities",
        params: {
          name: this.state,
        },
      }).then((res) => {
        this.id_f = res.data.data[0].id;
        this.scenics_f = res.data.data[0].scenics;
        this.num_f = res.data.data[0].scenics.length;
        // console.log(this.id_f);
        // this.$store.commit('MUTATIONS', payload)
        this.$router.push({
          path: "/hotel",
          query: this.form,
        });

        this.form.cityName = this.state;
        this.$axios({
          method: "get",
          url: "/hotels",
          params: {
            city: this.id_f,
          },
        }).then((res) => {
          this.hotelList_f = res.data.data;
          this.total = res.data.total;
          // console.log("hotelList_f");
          console.log(this.total);
          console.log(res.data.total);
          // console.log(this.hotelList_f);
        });
      });
    },

    // 搜索城市相关函数

    // 下面这个函数中的映射还是没有理解，有时间问问老师
    querySearchCity(string, cb) {
      this.$axios({
        method: "get",
        url: "/cities",
        params: {
          name: string,
        },
      }).then((res) => {
        // console.log(res.data.data);
        const list = res.data.data.map((city) => {
          return {
            ...city,
            value: city.name,
          };
        });
        console.log(this.state);
        cb(list);
      });

      // 酒店列表请求
    },
    handleSelect(item) {
      console.log(item);
    },
    // 获得到子组件的日期时间
    getAllDate(data) {
      // console.log(data);
      this.form.enterTime = data[0];
      this.form.leftTime = data[1];
      // console.log(
      //   "已经获取到了出发日期和离开日期" + this.form.leftTime,
      //   this.form.enterTime
      // );
    },
    loadAll() {
      return;
      {
        [
          { value: "上海", address: "长宁区新渔路144号" },
          { value: "上海大学", address: "adress" },
        ];
      }
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
  },
  mounted() {
    // this.$router.push({ path: "/hotel?cityName=" + "广州市" });
    // 搜索城市的mouted
    // 进入界面之后直接渲染area的数据
    this.$axios({
      method: "get",
      url: "/cities",
      params: {
        name: this.state,
      },
    }).then((res) => {
      this.id_f = res.data.data[0].id;
      this.scenics_f = res.data.data[0].scenics;
      this.num_f = res.data.data[0].scenics.length;
      this.form.cityName = res.data.data[0].name;
      this.$router.push({
        path: "/hotel",
        query: {
          id: this.id_f,
          cityName: this.form.cityName,
        },
      });
      // console.log(222);
      // console.log(this.id_f);
      // 进入界面渲染旅馆列表
      this.$axios({
        method: "get",
        url: "/hotels",
        params: {
          city: this.id_f,
        },
      }).then((res) => {
        this.hotelList_f = res.data.data;
        // console.log("进入界面渲染旅馆列表");
        this.total = res.data.total;
        // console.log(res.data.total);
        // console.log(this.$route.query);
        // console.log(this.$route.fullPath);
      });
    });

    this.restaurants = this.loadAll();

    // 页面挂载完, 开始异步引入 高德地图

    // 创建了一个回调函数, 高德地图加载完毕后会调用
    window.onLoad = function () {
      // 所有关于地图的逻辑;
      // 全部都要写在这个回调里面;
      // 保证高德地图加载完毕;
      var map = new AMap.Map("container", {
        zoom: 17,
        center: [113.3245904, 23.1066805],
        viewMode: "3D",
      });

      var marker = new AMap.Marker({
        position: [113.3245904, 23.1066805],
        title: "广州塔",
        offset: new AMap.Pixel(-100, -100),
        // 如果是替换图标使用 icon 属性
        icon: "//vdata.amap.com/icons/b18/1/2.png",
        // 如果希望自定义内容, 可以使用 content 属性
        // 如果用了 content 那么 icon 图标失效
        content: "<h2>广州塔</h2>",
      });

      map.add(marker);

      AMap.plugin("AMap.ToolBar", function () {
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });

      // function logMapinfo() {
      //   map.getCity(function (info) {
      //     var node = new PrettyJSON.view.Node({
      //       el: document.querySelector("#map-city"),
      //       data: info,
      //     });
      //   });
      // }
      // logMapinfo();
    };
    // api 地址
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=241755b73732c860b503a19d5d3766f9&callback=onLoad";
    // 创建一个 script dom 元素
    var jsapi = document.createElement("script");
    // 设定 script 标签属性
    jsapi.charset = "utf-8";
    jsapi.src = url;
    // 将api文件引入到页面中, 加载完毕以后就会调用回调函数 onLoad
    document.head.appendChild(jsapi);
  },

  components: {
    date,
    num,
    myarea,
    hotelFilter,
    hotelList,
  },
};
</script>

<style lang="less" >
.w {
  width: 1000px;
  margin: 0 auto;
  color: #666;
  .breadcrumb {
    padding: 20px 0;
  }

  .filter {
    width: 100%;
    padding-top: 10px;
    height: 42px;
    // background-color: gainsboro;
    //     <div class="city"></div>
    //     <div class="date"></div>
    //     <div class="num"></div>
    //     <div class="price"></div>
    .city {
      float: left;
      width: 20%;
    }

    .date {
      width: 40%;
      float: left;
      margin-left: 10px;
      // overflow: hidden;
    }
    .num {
      float: left;
      width: 20%;
    }
    .price {
      float: left;
      width: 15%;
    }
  }
}
.box2 {
  display: flex;
  #container {
    // float: right;
    width: 300px;
    height: 300px;
    flex: 1;
  }
}
</style>